<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>在平安</title>
    <meta name="description" content="中国平安" />
    <meta name="keywords" content="中国平安" />
    <meta content="width=640, target-densitydpi=320, user-scalable=no" name="viewport" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta content="telephone=no" name="format-detection" />

    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/public.css">
    <script src="../js/common/zepto.min.js" type="text/javascript"></script>
    <script src="../js/common/doT.js" type="text/javascript"></script>
    <script src="../js/common/validate.js" type="text/javascript"></script>
    <script src="../js/public.js" type="text/javascript"></script>
    <script src="../js/mywork/apply-leave.js" type="text/javascript"></script>
    <!-- <script src="../js/iscroll.js" type="text/javascript"></script> -->
    
    <script src="../js/mobiscroll/js/mobiscroll.zepto.js" type="text/javascript"></script>
	<script src="../js/mobiscroll/js/mobiscroll.core.js" type="text/javascript"></script>
	<script src="../js/mobiscroll/js/mobiscroll.scroller.js" type="text/javascript"></script>
	<script src="../js/mobiscroll/js/mobiscroll.datetime.js" type="text/javascript"></script>
	<script src="../js/mobiscroll/js/mobiscroll.scroller.ios.js" type="text/javascript"></script>
	<script src="../js/mobiscroll/js/mobiscroll.i18n.zh.js" type="text/javascript"></script>
	<link href="../js/mobiscroll/css/mobiscroll.scroller.css" rel="stylesheet" type="text/css" />
	<link href="../js/mobiscroll/css/mobiscroll.scroller.ios.css" rel="stylesheet" type="text/css" />
	<link href="../js/mobiscroll/css/mobiscroll.animation.css" rel="stylesheet" type="text/css" />
	<script src="../js/iscroll.js" type="text/javascript"></script>
    <style>
	/*
	*@@此样式为页面级，不能放在公共文件中
	*/
	#container{position: absolute;width: 100%;height: 100%;overflow:hidden;}
	.dw-webkit{position:absolute;width:100%;height:100%;z-index:1000;}
	</style>
</head>
<body>
<div id="container">
    <div id="qj-main-layer">
    	<article class="left-side" id="leftmenu"></article>
		<article class="content-main">
        <div class="top-bar">
            <div class="top-bar-cont">
                <span class="btn-bar-css btn-bar-menu btn-bar-left" id="J-BtnMenu"><i></i></span>
                <h1>请假</h1>
            </div>
        </div>
        <div class="loading-mask g-mask" id="CheckPrompt" style="display: none;">
    		<div class="loading-mask-img"><img src="../images/loading.gif" width="70" height="70"></div>
    	</div>
    	<input id="mydate" style="display:none;"/>
        <div id="content" style="position: relative;">
        	<div id="iscrollContent">
            <div class="row-info">
                <ul class="row-info-list" id="optionList">
                    <li id="l_type" class="icon-sprite next-icon">
                        <div class="info-list-name">假期类型：</div>
                        <div id="i_type" et="tap:viewLeaveType" class="info-list-cont">临时因公外出</div>
                    </li>
                    <li id="l_sDate" class="l-option icon-sprite time-icon">
                        <div class="info-list-name">开始日期：</div>
                        <div class="info-list-cont">
                            <input id="i_sDate" type="text" readonly="true" class="ipt dateSelector i-option" param-name="bgnDT" placeholder="起始日期"/>
                        </div>
                    </li>
                    <li id="l_eDate" class="l-option icon-sprite time-icon">
                        <div class="info-list-name">结束日期：</div>
                        <div class="info-list-cont">
                            <input id="i_eDate" type="text" readonly="true" class="ipt dateSelector i-option" param-name="endDT" placeholder="结束日期"/>
                        </div>
                    </li>
                    <li id="l_date" class="l-option icon-sprite time-icon">
                        <div class="info-list-name">日期：</div>
                        <div class="info-list-cont">
                            <input id="i_date" type="text" class="ipt dateSelector i-option" readonly="true" placeholder="请假日期"/>
                        </div>
                    </li>
                    <li id="l_halfDay1" class="l-option icon-sprite next-icon">
                        <div class="info-list-name">非整日请假：</div>
                        <div id="i_halfDay1" class="info-list-cont" et="tap:viewHalfDay"></div>
                    </li>
                    <li id="l_halfDay2" class="l-option icon-sprite next-icon">
                        <div class="info-list-name">非整日请假：</div>
                        <div id="i_halfDay2" class="info-list-cont" et="tap:onChangeHalfDay">整天</div>
                    </li>
                    <li id="l_sHour" class="l-option">
                        <div id="t_sHour" class="info-list-name">开始日小时数：</div>
                        <div class="info-list-cont">
                            <input id="i_sHour" type="text" class="ipt i-option" placeholder="0.00" param-name="beginDayHrs"/>
                        </div>
                    </li>
                    <li id="l_eHour" class="l-option">
                        <div class="info-list-name">结束日小时数：</div>
                        <div class="info-list-cont">
                            <input id="i_eHour" type="text" class="ipt i-option" placeholder="0.00" param-name="endDayHrs"/>
                        </div>
                    </li>
                    <li id="l_hour" class="l-option">
                        <div class="info-list-name">每日小时数：</div>
                        <div class="info-list-cont">
                            <input id="i_hour" type="text" class="ipt i-option" placeholder="0.00" param-name="allDayHrs"/>
                        </div>
                    </li>
                    <li id="l_firstMarry" class="l-option icon-sprite next-icon">
                        <div class="info-list-name">是否初婚：</div>
                        <div id="i_firstMarry" class="info-list-cont" et="tap:onChangeMarry">初婚</div>
                    </li>
                    <li id="l_reason">
                        <div class="info-list-name">请假原因：</div>
                        <div class="info-list-cont">
                            <textarea id="i_reason" class="textarea-css textarea-lh-nor textarea-min-height i-option" placeholder="请假原因" param-name="comments"></textarea>
                        </div>
                    </li>
                </ul>
            </div>
            </div>
        </div>
        <!-- 
        <div class="footer-fixed" id="footer" style="display: none;">
            <div class="footer-fixed-cont">
                <div class="footer-btn">
                    <div et="tap:submitApply" class="btn-css">提交</div>
                </div>
            </div>
        </div>
         -->
        <div class="footer-fixed" id="footer" style="display: none;position:relative;width:100%;left:0;bottom:15px;">
	        <div class="footer-fixed-cont">            
	            <div class="footer-fixed-bg"></div>
	            <div class="footer-btn">
	                <div et="tap:submitApply" class="btn-css">提交</div>
	            </div>
	        </div>
	    </div>
        </article>
    </div>

    <div id="qj-select-layer" style="display: none;">
        <header class="top-bar">
            <div class="top-bar-cont">
                <span class="btn-bar-css btn-bar-back btn-bar-left" id="selectType"><i></i></span>
                <h1>假期类型</h1>
            </div>
        </header>
        <section>
            <div class="row-info single-row" id="divSelectType" style="position: relative;">
            	<div>
                <ul class="row-info-list icon-click" id="qjTypeList">
                </ul>
                </div>
            </div>
        </section>
    </div>

    <div id="half-day-layer" style="display: none;">
        <header class="top-bar">
            <div class="top-bar-cont">
                <span class="btn-bar-css btn-bar-back btn-bar-left" id="selectFzr"><i></i></span>
                <h1>非整日请假</h1>
            </div>
        </header>
        <section>
            <div class="row-info single-row">
                <ul class="row-info-list" id="halfDayList">
                    <li>
                        <div et="tap:selectHalfDay" data-key="N" class="info-list-cont">每日整天请假</div>
                    </li>
                    <li>
                        <div et="tap:selectHalfDay" data-key="A" class="info-list-cont">每日非整天请假</div>
                    </li>
                    <li>
                        <div et="tap:selectHalfDay" data-key="S" class="info-list-cont">首日非整天请假</div>
                    </li>
                    <li>
                        <div et="tap:selectHalfDay" data-key="E" class="info-list-cont">结束日非整天请假</div>
                    </li>
                    <li>
                        <div et="tap:selectHalfDay" data-key="B" class="info-list-cont">首日和结束日非整天请假</div>
                    </li>
                </ul>
            </div>
        </section>
    </div>

    <div class="g-mask" id="noteMask">
        <div class="g-mask-bg" et="tap:hideBubble"></div>
        <div class="g-mask-layout" style="top:30%;">
            <article class="g-mask-content">
                <section class="g-mask-cont">
                    <p id="leaveMark">员工在工作时间需处理私人事务，需请事假。年度申请事假不得超过20天。</br>当本次请假时间导致年度申请事假超过20天时，提示：年度申请事假总共不得超过20天，您本次申请的事假时间过长。</p>
                </section>
            </article>
        </div>
    </div>
    
    <div class="g-mask" id="confirmMask">
        <div class="g-mask-bg"></div>
        <div class="g-mask-layout">
            <article class="g-mask-content">
                <section class="g-mask-cont">
                    <p id="confirmText"></p>
                </section>
                <footer class="g-mask-cont-btn">
                    <div et="tap:cancelSubmit" class="btn-css fn-c-999">放弃</div>
                    <div et="tap:confirmSubmit" class="btn-css fn-c-999">提交</div>
                </footer>
            </article>
        </div>
    </div>
</div>
<div class="g-mask" id="errorMask">
	<div class="g-mask-bg" id="errorBtncancel"></div>
	<div class="g-mask-layout">
		<article class="g-mask-content">
			<section class="g-mask-cont">
				<p id="message" style="word-break: break-all;"></p>
			</section>
		</article>
	</div>
</div>

<script type="template" id="leave-type-tpl">
    {{~it:value:index}}
    <li>
        <div et="tap:selectLeavetype" data-index="{{=index}}" data-leaveCode="{{=value.leaveType_code}}" class="info-list-cont">{{=value.leaveType}}</div>
        {{? value.leaveMark}}
		<div et="tap:showBubble" data-index="{{=index}}" class="info-list-icon ask-icon"></div>
		{{?}}
    </li>
    {{~}}
</script>


<script type="template" id="half-day-tpl">
    {{~it:value:index}}
    <li>
        <div et="tap:selectHalfDay" data-key="{{=value.key}}" class="info-list-cont">{{=value.value}}</div>
    </li>
    {{~}}
</script>

<script type="text/javascript">
    init();
</script>

</body>
</html>